<script setup lang="ts">
import { computed, toRefs } from 'vue'
import { useMediaQuery } from '@vueuse/core'

import {
  ElForm,
  ElFormItem,
  ElInput,
  ElOption,
  ElSelect,
} from 'element-plus'

import { langName, simpleLangName } from '../../../config/scripts/languages'
import type { Extension } from '../../queries/useExtensionsRepositoryQuery'

export type Sort = 'Ascending' | 'Descending'

const props = defineProps<{
  extensions: Extension[][]
  search: string
  lang: string[]
  sort: Sort
}>()

defineEmits<{
  (e: 'update:search', search: string): void
  (e: 'update:lang', lang: string[]): void
  (e: 'update:sort', sort: Sort): void
}>()

const { extensions } = toRefs(props)

const isSmallScreen = useMediaQuery('(max-width: 767px)')
const labelPosition = computed(() => isSmallScreen.value ? 'top' : 'right')
</script>

<template>
  <ClientOnly>
    <div class="filters-list">
      <ElForm label-width="120px" :label-position="labelPosition">
        <ElFormItem label="Search:">
          <ElInput
            :model-value="search"
            placeholder="Search extensions by name or ID..."
            clearable
            @update:model-value="$emit('update:search', $event)"
          />
        </ElFormItem>
        <ElFormItem label="Languages:">
          <ElSelect
            :model-value="lang"
            placeholder="Show specific languages..."
            multiple
            clearable
            @update:model-value="$emit('update:lang', $event)"
          >
            <ElOption
              v-for="[group] in extensions"
              :key="group.lang"
              :label="group.lang === 'en' ? simpleLangName(group.lang) : langName(group.lang)"
              :value="group.lang"
            />
          </ElSelect>
        </ElFormItem>
      </ElForm>
    </div>
  </ClientOnly>
</template>

<style lang="stylus">
.filters-list {
  display: flex
  flex-direction: column
  row-gap: 1rem
}

.el-select {
  width: 100%
}
</style>
